<template>
  <view>
    <view class="uni-uploader" v-show="isShow">
      <view class="uni-uploader-head">
        <view class="uni-uploader-title">点击可预览选好的图片</view>
        <view class="uni-uploader-info">{{ imageList.length }}/9</view>
      </view>
      <view class="uni-uploader-body">
        <view class="uni-uploader__files">
          <block v-for="(image, index) in imageList" :key="index">
            <view class="uni-uploader__file" style="position: relative">
              <!-- 
                @tap="previewImage"
             -->
              <image
                class="uni-uploader__img"
                :src="image.url"
                :data-src="image"
                @click="previewImage(index)"
                mode="aspectFill"
              ></image>
              <view class="schu" @click.stop="delImg(index)">
                <text class="iconfont icon-shanchu"> </text>
              </view>
            </view>
          </block>
          <view class="uni-uploader__input-box">
            <view class="uni-uploader__input" @tap="chooseImage"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import permision from "@/common/permission.js";
var sourceType = [["camera"], ["album"], ["camera", "album"]];
var sizeType = [["compressed"], ["original"], ["compressed", "original"]];
export default {
  props: ["isShow", "imgLists"],
  data() {
    return {
      title: "choose/previewImage",
      imageList: [],
      sourceTypeIndex: 2,
      sourceType: ["拍照", "相册", "拍照或相册"],
      sizeTypeIndex: 2,
      sizeType: ["压缩", "原图", "压缩或原图"],
      countIndex: 8,
      count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    };
  },
  mounted() {
    // console.log(this.isShow);
    this.imageList = this.imgLists;
    console.log(this.imageList);
  },
  onUnload() {
    (this.imageList = []),
      (this.sourceTypeIndex = 2),
      (this.sourceType = ["拍照", "相册", "拍照或相册"]),
      (this.sizeTypeIndex = 2),
      (this.sizeType = ["压缩", "原图", "压缩或原图"]),
      (this.countIndex = 8);
  },
  methods: {
    // 删除图片
    delImg(index) {
      this.imageList.splice(index, 1);
      this.$emit("chang", this.imageList);
    },
    chooseImage: async function () {
      // #ifdef APP-PLUS
      // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
      if (this.sourceTypeIndex !== 2) {
        let status = await this.checkPermission();
        if (status !== 1) {
          return;
        }
      }
      // #endif

      if (this.imageList.length === 9) {
        let isContinue = await this.isFullImg();
        console.log("是否继续?", isContinue);
        if (!isContinue) {
          return;
        }
      }
      uni.chooseImage({
        sourceType: sourceType[this.sourceTypeIndex],
        sizeType: sizeType[this.sizeTypeIndex],
        count:
          this.imageList.length + this.count[this.countIndex] > 9
            ? 9 - this.imageList.length
            : this.count[this.countIndex],
        success: (res) => {
          // 把图片上传到服务器
          console.log(res);
          res.tempFilePaths.forEach((item) => {
            console.log(item);
            uni.uploadFile({
              url: "https://ceshi2.dishait.cn/api/v1/image/uploadmore", //仅为示例，非真实的接口地址
              filePath: item,
              name: "imglist[]",
              header: {
                token: this.$store.state.token,
              },
              success: (uploadFileRes) => {
                let imglist = JSON.parse(uploadFileRes.data);
                // console.log(
                //   "-------------------------------",
                //   imglist.data.list
                // );

                this.imageList = this.imageList.concat(imglist.data.list);
                // this.imageList.push(imglist.data.list);
                //   console.log(res);
                //   console.log(this.imageList);
                // 获取到图片的数据 发送到父组件中
                console.log(this.imageList);
                this.$emit("chang", this.imageList);
              },
            });
          });
        },
        fail: (err) => {
          console.log("err: ", err);
          // #ifdef APP-PLUS
          if (err["code"] && err.code !== 0 && this.sourceTypeIndex === 2) {
            this.checkPermission(err.code);
          }
          // #endif
          // #ifdef MP
          if (err.errMsg.indexOf("cancel") !== "-1") {
            return;
          }
          uni.getSetting({
            success: (res) => {
              let authStatus = false;
              switch (this.sourceTypeIndex) {
                case 0:
                  authStatus = res.authSetting["scope.camera"];
                  break;
                case 1:
                  authStatus = res.authSetting["scope.album"];
                  break;
                case 2:
                  authStatus =
                    res.authSetting["scope.album"] &&
                    res.authSetting["scope.camera"];
                  break;
                default:
                  break;
              }
              if (!authStatus) {
                uni.showModal({
                  title: "授权失败",
                  content:
                    "Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限",
                  success: (res) => {
                    if (res.confirm) {
                      uni.openSetting();
                    }
                  },
                });
              }
            },
          });
          // #endif
        },
      });
    },
    isFullImg: function () {
      return new Promise((res) => {
        uni.showModal({
          content: "已经有9张图片了,是否清空现有图片？",
          success: (e) => {
            if (e.confirm) {
              this.imageList = [];
              res(true);
            } else {
              res(false);
            }
          },
          fail: () => {
            res(false);
          },
        });
      });
    },
    previewImage: function (e) {
      console.log(e); //拿到点击的索引值
      // 获取图片的url
      let imageList = this.imageList.map((item) => item.url);
      uni.previewImage({
        current: e,
        urls: imageList,
      });
    },
    async checkPermission(code) {
      let type = code ? code - 1 : this.sourceTypeIndex;
      let status = permision.isIOS
        ? await permision.requestIOS(sourceType[type][0])
        : await permision.requestAndroid(
            type === 0
              ? "android.permission.CAMERA"
              : "android.permission.READ_EXTERNAL_STORAGE"
          );

      if (status === null || status === 1) {
        status = 1;
      } else {
        uni.showModal({
          content: "没有开启权限",
          confirmText: "设置",
          success: function (res) {
            if (res.confirm) {
              permision.gotoAppSetting();
            }
          },
        });
      }

      return status;
    },
  },
};
</script>

<style lang="less">
.cell-pd {
  padding: 22rpx 30rpx;
}

.list-pd {
  margin-top: 50rpx;
}
.schu {
  position: absolute;
  top: 1px;
  right: 1px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5rpx 8rpx;
  border-radius: 8rpx;
  text {
    color: #fff;
  }
}
</style>
